<template>
  <div>
    <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="SPU" prop="spu">
          <el-input v-model="ruleForm.spu"></el-input>
        </el-form-item>
        <el-form-item label="币种" prop="cny">
          <el-input v-model="ruleForm.cny"></el-input>
        </el-form-item>
        <el-form-item label="统计时间" prop="time">
          <el-input v-model="ruleForm.time"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">立 即 创 建</el-button>
  </span>
    </el-dialog>
    <p class="P">财务利润分析报表</p>
    <span class="span1">SPU</span>
    <el-input v-model="spu" placeholder="请输入内容" class="spu"></el-input>
    <span class="span2">币种</span>
    <el-input v-model="bz" placeholder="请输入内容" class="spu"></el-input>
    <span class="span3">统计时间</span>
    <el-date-picker
          class="spu"
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
    </el-date-picker>
      <div class="add">
        <el-button type="primary" @click="openDialog('ruleForm')">新增</el-button>
        <el-button type="primary">查询</el-button>
      </div>
    <el-table
        class="table"
        :data="tableData"
        stripe
        style="width: 50%">
      <el-table-column
          label="序号"
          align="center"
          prop="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="spu"
          label="SPU"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cny"
          label="币种"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="time"
          label="统计时间"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row.id)">编辑
          </el-button>
          <el-popconfirm
              title="确定删除该数据吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <edit-item></edit-item>
  </div>
</template>

<script>
import axios from "axios";
import EditItem from "@/components/EditItem";

export default {
  name: "HomeView",
  components:{
    EditItem
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      spu: '',
      bz:'',
      time:'',
      tableData: [],
      dialogVisible: false,
      dialogVisibleEdit: false,
      ruleForm: {
        id:'',
        spu: '',
        cny: '',
        time:''
      },
      rules: {
        spu: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        cny: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
      },
      ruleFormEdit: {
        id:'',
        spu: '',
        cny: '',
        time:''
      }
    }
  },
  methods:{
    refresh(){
      axios.post("http://localhost:8081/ProfitabilityAnalysis/selectAll").then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data
      });
    },
    handleEdit(id){
     this.dialogVisibleEdit = true
      axios.post("http://localhost:8081/ProfitabilityAnalysis/select",{
        "id": id
      }).then((res) => {
        this.ruleFormEdit = res.data.data
      });
    },
    handleDelete(id){
      axios.post("http://localhost:8081/ProfitabilityAnalysis/delete",{
        "id": id
      }).then((res) => {
        if(res.data.code == 0){
          this.$message.success("删除成功")
          this.refresh()
        }
      });
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post("http://localhost:8081/ProfitabilityAnalysis/insert",this.ruleForm).then((res) => {
            console.log(res.data);
            console.log(res.data.code)
            if(res.data.code == 0){
              this.dialogVisible = false
              this.$message.success("新增成功")
              //新增成功后，重新刷新页面
              this.refresh()
            }else{
              this.$message.error("新增失败")
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openDialog(formName){
      this.dialogVisible = true
      this.$refs[formName].resetFields();
    },
    editForm(ruleFormEdit,id){
      axios.post("http://localhost:8081/ProfitabilityAnalysis/update",{
        "fundModel" : ruleFormEdit,
        "id" : id
      }).then((res) => {
        console.log("1111111" + res.data);
      });
    }
  },
  created() {
    this.refresh()
  },
}
</script>

<style scoped>
.add{
  margin-left: 1625px;
  margin-top: 15px;
}
.P{
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}
.span1{
  margin-left: 350px;
  font-size: 20px;
}
.spu{
  width: 250px;
  margin-left: 15px;
}
.span2{
  margin-left: 145px;
  font-size: 20px;
}
.span3{
  margin-left: 145px;
  font-size: 20px;
}
.table{
  margin-left: 500px;
}
</style>